<template>
	<view >
		<view class="">
			<!-- 添加轮播图 -->
			<view style="display: flex;width: 700rpx;background-color: white;border-radius: 20rpx;margin: 20rpx auto;align-items: center;height: 120rpx;" @click="tolunbotu()">
				<uni-icons style="margin-left: 35rpx;margin-right: 20rpx;" type="plusempty" size="20"></uni-icons>
				添加轮播图！
			</view>
			<view v-for="(item,index) in bannerlists" :key="index" style="display: flex;overflow: hidden; width: 700rpx;height: 280rpx; margin: 20rpx auto 5rpx auto;border-radius: 20rpx;" @click="tolunbotu(item)">
				<image style="width: 700rpx;height: 280rpx;" :src="item.url" mode=" scaleToFill"></image>
			</view>
		</view>
		<!-- 下面是点 添加轮播图使用 -->
		<model v-if='show1' @colseModel='show1 = false'>
				<view style="display:flex;padding: 40rpx;flex-direction: column;">
					<view style="display: flex;flex: 3;justify-content: center;font-weight: 700;">
						轮播图设置
					</view>
				</view>
				<view style="display: flex;flex-direction: column;">
					<view style="margin-bottom: 20rpx;">
						请选择图片
					</view>
					<view v-if="show2 && shu4 " style="display: flex;flex-direction: row; width:400rpx;height: 160rpx;border-style: solid; border-width: 5rpx;border-color:#c2c2c2; border-radius: 20rpx;"  >
						<image style="display: flex;width:400rpx;height: 160rpx;" :src="shu3" mode="aspectFit"></image>
						<view style="display: flex;margin: 5rpx 0 0 -45rpx;" @click="delpic(shu3)">
							<!-- <uni-icons style="font-size: 60rpx;color: #7F7F7F;" type="clear"></uni-icons> -->
						</view>
					</view>
					<view style="display: flex;justify-content: center;" >
						<uni-file-picker v-if="show3 || !shu4" limit="1" v-model="shu6" :del-icon="true" mode="grid" return-type="object" :imageStyles="imageStyles" file-mediatype="image" @success="fanhuiurl" @delete="delpic"></uni-file-picker>
					</view>
					
					<!-- <view style="display: flex;justify-content: center;" >
						<uni-file-picker v-if="show2" limit="2"  :del-icon="true" mode="grid" return-type="object" v-model="shu6" :imageStyles="imageStyles" file-mediatype="image" @success="fanhuiurl" @delete="delpic"></uni-file-picker>
					</view> -->
				</view>
				<view style="display: flex;margin:30rpx 0 20rpx 0;flex-direction: row;">
					点击目标地址
					<view style="color: #c2c2c2;font-size: 20rpx;">
						(如不跳转输入任意数字)
					</view>
				</view>
				<input style="padding: 15rpx 25rpx; border-radius: 9rpx;box-shadow: 1px 1px 5px #c2c2c2;" type="text" v-model="shu1" focus placeholder="请输入要跳转的网址">
				<view style="display: flex;margin:30rpx 0 20rpx 0;">标题</view>
				<input style="padding: 15rpx 25rpx; border-radius: 9rpx;box-shadow: 1px 1px 5px #c2c2c2;" type="text" v-model="shu2" focus placeholder="请输入轮播图的标题">
				<view style="display: flex;flex-direction: row;margin-top: 80rpx;justify-content: center;">
					<view style="display: flex;width: 120rpx;border-radius: 15rpx;background-color: blue;color: white;justify-content: center;align-items: center;padding: 10rpx;" @click="tijiaolunbotu">
						{{shu4?'修改':'提交'}}
					</view>
					<view style="display: flex;width: 120rpx;border-radius: 15rpx;background-color: blue;color: white;justify-content: center;align-items: center;margin-left: 60rpx;padding: 10rpx;" @click="show1 = false">
						返回
					</view>
				</view>
				<view v-if="quankezx_userinfo.permission.indexOf('del_lunbotu')!=-1" style="display: flex;color: dodgerred;margin-top: 50rpx;justify-content: center;" @click="shanchulunbotu(shu5)">
					删除本张轮播图
				</view>
		</model>
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js';
	import model from '../../components/model.vue'
	export default {
		components: {
			model
		},
		data() {
			return {
				imageStyles: {
					width: 200,
					height: 80,
					border: {
						radius:'20rpx'
					}
				},
				bannerlists:[],
				show1:false,//添加轮播图时弹窗
				show2:true,//修改轮播图时，图片是否显示
				show3:false,//修改轮播图时，图片上传窗口是否显示
				shu1:'',//要跳转的网址
				shu2:'',//轮播图的标题 
				shu3:'',//轮播图片地址
				shu4:'',//判断修改还是提交临时用
				shu5:'',//轮播图片的ID
				shu6:[],
			}
		},
		async onLoad() {
			this.quankezx_userinfo=await uniCloud.getCurrentUserInfo()
			this.huoqulunbotu()
		},
		methods: {
			//删除图片
			delpic(){
				uni.showLoading({
					title:"删除中……",
					mask:true
				})
				uniCloud.callFunction({
					name:"delpic",
					data:{
						leixing:0,
						picurl:this.shu3
					}
				}).then(res=>{
					uni.hideLoading()
					this.shu6=[]
					this.show2=false
					this.show3=true
				})
			},
			//点轮播图修改时
			// tupian(){
			// 	this.show2=false
			// 	this.show3=true
			// },
			// 上传成功
			fanhuiurl(e){
				this.shu3=e.tempFiles[0].fileID
				// this.zhaopian=e.tempFiles[0].fileID
			},
			//获取轮播图
			huoqulunbotu(){
				uni.showLoading({
					mask:true,
					title:"加载中……"
				})
				uniCloud.callFunction({
					name:"delpic",
					data:{
						leixing:3,//获取轮播图片
					}
				}).then(res=>{
					this.bannerlists=res.result.res.data
					uni.hideLoading()
				})
			},
			//提交或修改轮播图
			tijiaolunbotu(){
				uni.showLoading({
					title:"轮播图数据处理中……",
					mask:true
				})
				if(this.shu4){
					if(!this.shu1 || !this.shu2 || !this.shu3){
						uni.showToast({
							title: '请填好各项且上传图片再试',
							icon: 'none',
							duration: 1000
						})
						uni.hideLoading()
						return
					}
				}else{
					if(!this.shu1 || !this.shu2 || !this.shu6){
						uni.showToast({
							title: '请填好各项且上传图片再试',
							icon: 'none',
							duration: 1000
						})
							uni.hideLoading()
						return
					}
				}
				this.show1=false
				if(this.shu4){
					uniCloud.callFunction({
						name:"delpic",
						data:{
							leixing:1,//修改轮播图片
							time:getDateTime.dateTimeStr('y-m-d h:i:s'),
							biaoti:this.shu2,
							lianjie:this.shu1,
							url:this.shu3?this.shu3:this.shu6,
							id:this.shu5
						}
					}).then(res=>{
						this.shu1=this.shu2=this.shu3=this.shu4=this.shu5=this.shu6=''
						uni.hideLoading()
					})
				}else{
					uniCloud.callFunction({
						name:"delpic",
						data:{
							leixing:2,//提交轮播图片
							time:getDateTime.dateTimeStr('y-m-d h:i:s'),
							biaoti:this.shu2,
							lianjie:this.shu1,
							url:this.shu3
						}
					}).then(res=>{
						uni.hideLoading()
					})
				}
				setTimeout(() => {
				  this.huoqulunbotu()
				}, 500)
			},
			//点击进入轮播图修改页面
			tolunbotu(e){
				this.shu1=this.shu2=this.shu3=this.shu4=this.shu5=this.shu6=''
				if(e){
					this.shu4=e.url
					this.shu3=e.url
					this.shu1=e.lianjie
					this.shu2=e.biaoti
					this.shu5=e._id
				}
				this.show1=true
			},
			//删除本张轮播图
			shanchulunbotu(){
				uni.showLoading({
					title:"删除中……",
					mask:true
				})
				this.show1=false
				//删除图片文件 
				uniCloud.callFunction({
					name:"delpic",
					data:{
						picurl:this.shu3,
						leixing:0,//删除头像
					}
				}).then(res=>{})
				//删除本条记录
				uniCloud.callFunction({
					name:"delpic",
					data:{
						id:this.shu5,
						leixing:4,
					}
				}).then(res=>{})	
				setTimeout(() => {
				  this.huoqulunbotu()
				  uni.hideLoading()
				}, 500)
			},
		}
	}
</script>

<style>

</style>
